<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/9/24
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>村花</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/Apage/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/Apage/css/home.css">
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">姓名:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="uname" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入名称" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">账号:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="userLoginId" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入账号" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户地址:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="uaddress" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入用户地址" style="height: 30px;border-radius: 10px">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">电话:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="uphone" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入电话" style="height: 30px;border-radius: 10px">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="usex" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入性别" style="height: 30px;border-radius: 10px">
            </div>
        </div>

    </div>


    <div class="layui-form-item">
        <div class="layui-input-black" style="text-align: center">
            <button type="button"
                    class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                    lay-submit  lay-filter="doSearch" style="margin-top: 4px">查询
            </button>
            <button type="reset"
                    class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
                    style="margin-top: 4px">重置
            </button>

        </div>
    </div>

</form>
<!-- 搜索条件结束 -->
<table id="UserTable" lay-filter="UserTable"></table>

<script id="toolbarUser" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delBatch">批量删除</button>
    </div>
</script>

<script id="barUser" type="text/html">
    <a class="layui-btn layui-btn-xs layui-btn-radius" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius" lay-event="del">删除</a>
</script>



<!-- 添加和修改的弹出层-->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名:</label>
                <input type="hidden" name="id1" id="id1">
                <div class="layui-input-inline">
                    <input type="text" name="uname" lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-inline">
                    <input type="text" name="usex" id="alogin" lay-verify="required" placeholder="请输性别" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">地址:</label>
                <div class="layui-input-inline">
                    <input type="text" name="uaddress" placeholder="请输入地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电话:</label>
                <div class="layui-input-inline">
                    <input type="text" name="uphone" placeholder="请输入电话" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">账号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="userLoginId" lay-verify="required|phone" placeholder="请输入账号" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">密码:</label>
                <div class="layui-input-inline">
                    <input type="text" name="userPwd" lay-verify="required|phone" placeholder="请输入密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;padding-right: 120px">
                <button type="button"
                        class="layui-btn layui-btn-normal layui-btn-md layui-icon layui-icon-release layui-btn-radius"
                        lay-filter="doSubmit" lay-submit="">提交
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-warm layui-btn-md layui-icon layui-icon-refresh layui-btn-radius">重置
                </button>
            </div>
        </div>
    </form>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/Apage/layui/layui.js"></script>
<script>

    var tab;
    var index
    var layeditContent
    layui.use(['table','form','layer','jquery','laydate','layedit'], function() {
        var table = layui.table
        var form = layui.form
        var layer = layui.layer
        var $ = layui.jquery
        var laydate = layui.laydate;
        var layedit = layui.layedit;
        //执行一个laydate实例
        laydate.render({
            elem: '#createtime1' //指定元素
            , type: "datetime"
        });

        laydate.render({
            elem: '#createtime2' //指定元素
            , type: "datetime"
        });
        // 初始table
        tab = table.render({
            elem: "#UserTable"
            , url: "${pageContext.request.contextPath}/auser/findAuser"
            , page: {limit: 5, limits: [5, 10, 15]} //开启分页
            , cellMinWidth: 80
            , toolbar: '#toolbarUser' //开启头部工具栏，并为其绑定左侧模板
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: '编号', fixed: 'center'}
                , {field: 'uname', title: '姓名', fixed: 'center'}
                , {field: 'userLoginId', title: '账号', fixed: 'center'}
                , {field: 'userPwd', title: '密码', fixed: 'center'}
                ,{field:'usex', title: '性别',fixed: 'center' }
                , {field: 'uaddress', title: '地址', fixed: 'center'}
                , {field: 'uphone', title: '电话', fixed: 'center'}
                , {fixed: 'right', title: '操作', toolbar: '#barUser'}
            ]]
        })

        // form表单提交  -- 查询功能
        form.on("submit(doSearch)", function (data) {
            // $("#searchFrm").serialize() 这会生成一个A=valueA&B=valueB这种形式的字符串。
            tab.reload({
                url: "${pageContext.request.contextPath}/auser/findAuser?" + $("#searchFrm").serialize()
                , page: {
                    curr: 1
                }
            })
            return false;
        })

        // 头部工具栏添加事件
        table.on('toolbar(UserTable)', function (obj) {
            if (obj.event == "delBatch") { // 批量删除
                delchekAll(obj)
            } else if (obj.event == "add") {//添加
                Add()
            }
        })

        function delchekAll(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data1=checkStatus.data
            var ids=""
            for(var i=0;i<data1.length;i++){
                if(i==data1.length-1){
                    ids+=data1[i].id
                }else{
                    ids+=data1[i].id+","
                }
            }
            if(data1.length=="0"){
                layer.msg("请至少选中一条数据")
                return false;
            }
            layer.confirm("确定要删除"+data1.length+"条数据吗?",function () {
                $.post("${pageContext.request.contextPath}/auser/delAll",{"ids":ids},function (r) {
                    tab.reload()
                    layer.msg(r.msg)
                })
            })
        }


        function Add() {
            // 弹出框
            index =  layer.open({
                type:1 // 1（页面层）
                , title:"添加客户"
                , content:$("#saveOrUpdateDiv")
                , area : ['700px', '500px']
                , success:function() {
                    // 页面数据要清除
                    $("#dataFrm")[0].reset()
                    $("#id1").val("")
                }
            })
        }


        // form表达提交 -- 新增/修改
        form.on("submit(doSubmit)",function(d) {
            // 获取富文本上的内容
            layedit.getContent(layeditContent)
            layedit.sync(layeditContent) //  把富文本内容同步到textarea
            layer.confirm("您确定要提交该数据么",function(ind){
                $.post("${pageContext.request.contextPath}/auser/add",$("#dataFrm").serialize(),function(data) {
                    layer.msg(data.msg)
                    layer.close(index)
                    // 刷新table数据
                    tab.reload()

                })
                layer.close(ind)
            })
            return false;
        })

        //监听行工具事件
        table.on('tool(UserTable)', function (obj) {
            var data = obj.data
            if (obj.event == "del") { // 删除
                delete1(data.id)
            } else if (obj.event == "edit") {//编辑
                update(obj.data)
            }
        })


        function delete1(id) {
            layer.confirm("确定删除该数据么？",function () {
                // 1. 该菜单是否有子菜单
                $.post("${pageContext.request.contextPath}/auser/delete",{"id":id},function (r) {
                    layer.msg(r.msg)
                    layer.close(index)
                    tab.reload()
                    window.location.reloadadmin
                })


            })
        }
        function update(data) {
            // 弹出框
            index =  layer.open({
                type:1 // 1（页面层）
                , title:"修改客户"
                , content:$("#saveOrUpdateDiv")
                , area : ['700px', '500px']
                , success:function() {
                    form.val("dataFrm",data)
                    $("#id1").val(data.id)



                }
            })
        }



    })
</script>

</body>
</html>